<template>
  <div>
    <el-card class="box-card-header" >
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item label="报价编号">
             <el-input v-model="formInline.user" placeholder="报价编号"></el-input>
           </el-form-item>
           <el-form-item label="用户编号">
             <el-input v-model="formInline.user" placeholder="用户编号"></el-input>
           </el-form-item>
           <el-form-item label="创建日期">
             <div class="block">
                 <el-date-picker
                   v-model="value1"
                   type="date"
                   placeholder="选择日期">
                 </el-date-picker>
               </div>
           </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchDo(formInline.user)">查询</el-button>
            <el-button type="primary" @click="clearable()">清空查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="showInsert">新建</el-button>
          </el-form-item>
         </el-form>
     </el-card>


     <!-- 表格卡片-->
     <el-card class="box-card-content" v-bind:style="{minHeight: Height+'px'}">
       <el-table
           ref="multipleTable"
           :data="tableData"
           tooltip-effect="dark"
           style="width: 100%"
           @selection-change="handleSelectionChange">
           <el-table-column
             type="selection"
             width="55">
           </el-table-column>
           <el-table-column
             label="报价编号"
             width="120"
             prop="offerno"
             >
           </el-table-column>
           <el-table-column
             prop="userno"
             label="用户编号"
             width="120">
           </el-table-column>
           <el-table-column
             prop="username"
             label="用户姓名"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="offerprice"
             label="报价价格"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="offerdate"
             label="报价创建日期"
             show-overflow-tooltip>
           </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
         </el-table>
    </el-card >
      <el-card  shadow="never" >
         <el-pagination style="margin-top: 20px;" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
           :page-size="pageSize" background='true' layout="total, prev, pager, next" :total="totleSize">
         </el-pagination>
       </el-card>
  </div>
</template>
<script src="./vue.js"></script>
<script>
  export default {
     data() {
       return {
         pageSize: 5,
         currentPage1: 1,
         totleSize: 0,
         Height:0,
         tableData: [],
         multipleSelection: [],
         formInline: {
                   user: '',
                   region: ''
                 }
         };

        },
        methods: {
            handleSelectionChange(val) {
              this.multipleSelection = val;
            },
            handleEdit(index, row) {
              console.log(index, row);
            },
            getdata(){
              this.getRequest('Sales/offer/getAllList?beginPage=' + this.currentPage1 + '&pageSize=' + this.pageSize)
                .then(successResponse => {
                  if (successResponse.data.status == 200) {
                    this.tableData = successResponse.data.obj;
                    this.totleSize = successResponse.data.totleSize;
                  } else
                    this.$message.error(successResponse.data.msg);
                })
                .catch(failResponse => {
                  this.$message.error('网络不通畅');
                })
            },
            /* deleteRow(index, row) {
              this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.postRequest('Sales/offer/deleteOffer', {
                    productno: row.productno,
                  })
                  .then(successResponse => {
                    if (successResponse.data.status == 200) {
                      this.$message.success("删除成功！");
                      this.currentPage1=1;
                      this.getdata()
                    } else
                      this.$message.error(successResponse.data.msg);
                  })
                  .catch(failResponse => {
                    this.$message.error('网络不通畅');
                  });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });
            }, */
            onSubmit() {
                    console.log('submit!');
            },
            handleCurrentChange(val) {
              this.getdata()
            },
            handleClick(tab, event) {
                    console.log(tab, event);
                  }
          },
          mounted(){
              //动态设置内容高度 让footer始终居底   header+footer的高度是100
              this.Height = document.documentElement.clientHeight -375;
          　　//监听浏览器窗口变化　
              window.onresize = ()=> {this.Height = document.documentElement.clientHeight-375 }
            }
        }
</script>

<style>
      .box-card-header{
        width: 100%;
      }
      .box-card-content{
        width: 100%;
      }
</style>
